<!DOCTYPE html>
<html>
<head>
    <title>滑动验证</title>
    {eyou:static file="/public/static/common/js/jquery.min.js" /}
    {eyou:static file="/public/plugins/layer-v3.1.0/layer.js" /}
    {eyou:static file="users/skin/css/basic.css" /}
    {eyou:static file="users/skin/verify/verify.css" /}
    {eyou:static file="users/skin/verify/verify.js" /}
</head>
<body>
    <div class="verify-mask">
        <div class="verifybox" style="max-width: 360px;">
            <div class="">
                <div id="slideBar"></div>
            </div>
        </div>
        <input type="hidden" name="__mobile_1_token__" value="{$Request.token.__mobile_1_token__}" />
        <input type="hidden" name="mobile_vertify" id="mobile_vertify" value="{$code}" />
    </div>
    <!-- 图片验证JS -->
    <script type="text/javascript">
        var parentObj = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){
                get_mobile_token(1);
            },
            fail: function(){
                get_mobile_token(0);
                console.log("fail");  
            }
        };
        SliderBar("slideBar", options);

        /**
         * 封装的加载层
         */
        function layer_loading(msg){
            msg += '...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请勿刷新页面';
            // msg += '<style>.layui-layer-msg{z-index: 19891016!important;border: 0px!important;}</style>';
            var loading = layer.msg(msg, 
            {
                icon: 1,
                time: 3600000, //1小时后后自动关闭
                shade: [0.2] //0.1透明度的白色背景
            });
            //loading层
            var index = layer.load(3, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            return loading;
        }

        function send_mobile_code() {

            var mobile = $("#theMobileForm input[name=mobile]", window.parent.document);
            // 手机号是否为空
            if (!mobile.val()) {
                mobile.focus();
                var msg = mobile.attr('placeholder');
                if (!msg) {
                    msg = '请输入手机号';
                }
                layer.msg(msg, {time: 1500});
                return false;
            }

            // 手机格式不正确
            var reg = /^1[0-9]{10}$/i;
            if (!reg.test(mobile.val())) {
                mobile.focus();
                layer.msg('请输入正确的手机号码！', {time: 1500});
                return false;
            }

            // 设置为不可点击
            $("#theMobileForm #mobile_code_button", window.parent.document).attr('disabled', 'disabled');
            var mobile_vertify = $("input[name=mobile_vertify]").val();
            var __mobile_1_token__ = $('input[name=__mobile_1_token__]').val();
            layer_loading('正在发送');
            $.ajax({
                url: '{$RootDir}/index.php?m=api&c=Ajax&a=SendMobileCode&_ajax=1',
                data: {type:'users_mobile_loginsynreg', mobile:mobile.val(), is_mobile:false, title:'登录', source:2, IsVertify:1, vertify:mobile_vertify, __mobile_1_token__:__mobile_1_token__},
                type:'post',
                dataType:'json',
                success:function(res){
                    layer.closeAll();
                    if (res.code == 1) {
                        var _parent = parent;
                        _parent.code_countdown();
                        _parent.layer.close(parentObj);
                        _parent.layer.msg(res.msg, {time: 1500});
                    } else {
                        $("#theMobileForm #mobile_code_button", window.parent.document).html('获取验证码').removeAttr("disabled");
                        layer.alert(res.msg, {icon: 2, title: false, closeBtn: 0});
                    }
                },
                error : function() {
                    layer.closeAll();
                    $("#theMobileForm #mobile_code_button", window.parent.document).html('获取验证码').removeAttr("disabled");
                    layer.alert(e.responseText, {icon: 5, title: false, closeBtn: 0});
                }
            });
        }

        function get_mobile_token(is_send)
        {
            $.ajax({
                async:false,
                url: '{$RootDir}/index.php?m=api&c=Ajax&a=get_token&name=__mobile_1_token__',
                data: {_ajax:1},
                type:'GET',
                dataType:'html',
                success:function(res){
                    $('input[name=__mobile_1_token__]').val(res);
                    if (1 == is_send) {
                        send_mobile_code();
                    }
                },
                error : function(e) {
                    layer.alert(e.responseText, {icon: 5, title:false});
                }
            });
        }
    </script>
</body>
</html>